import React, { useState } from "react";
import { Modal } from "antd-mobile";
import { Toast, NavBar, Stepper } from "react-vant";
import { useNavigate } from "react-router-dom";
import "./index.css";
import { Checkbox } from "react-vant";
import { SubmitBar } from "react-vant";

function Index() {
  const navigate = useNavigate();
  const [carList, setCarList] = React.useState<any[]>(
    JSON.parse(localStorage.getItem("cartList")!) || []
  );
  const [flag, setFlag] = useState(false);
  let [sum, setSum] = useState(0);
  let [qxindex, setQxindex] = useState(0);

  const checkAll = () => {
    setFlag(!flag);
    if (flag) {
      setSum(0);
      carList.forEach((item: any) => {
        item.checked = false;
      });
    } else {
      carList.forEach((item: any) => {
        item.checked = !flag;
      });
      calculateTotalPrice();
    }
  };

  const calculateTotalPrice = () => {
    let total = 0;
    carList.forEach((item: any) => {
      if (item.checked) {
        total += item.price*value9;
      }
    });
    setSum(total);
  };

  const handleItemCheck = (index: number) => {
    const newCarList = [...carList];
    newCarList[index].checked = !newCarList[index].checked;
    setCarList(newCarList);
    calculateTotalPrice();
    setQxindex((qxindex += 1));
    if (qxindex >= carList.length) {
      setFlag(true);
    } else {
      setFlag(false);
    }
  };
  const [value9, setValue9] = useState(0);
  const zf = () => {
    Toast.info("已提交订单");
    Modal.show({
      content: (
        <div>
          <div>请支付</div>
          <img
            src="../../../src/assets/ewm.jpg"
            className="ewm"
          />
        </div>
      ),
      closeOnAction: true,
      actions: [
        {
          key: "online",
          text: "确定",
          primary: true,
        },
      ],
    });
  };
  return (
    <div className="cartwrap">
      <div className="carttop">
        <NavBar
          title="购物车"
          leftText="返回"
          onClickLeft={() => navigate(-1)}
        />
      </div>
      <div className="tup">
        {carList.length > 0 ? (
          <div>
            {carList.map((item: any, index: any) => (
              <div key={index} className="boxitem">
                <Checkbox
                  checked={item.checked}
                  onClick={() => handleItemCheck(index)}
                ></Checkbox>
                <img src={item.img} />
                <div>
                  <div className="wz">{item.title}</div>
                  <div>￥{item.price}</div>
                  <div>
                    <Stepper
                      min={0}
                      value={value9}
                      onChange={(v) => {
                        setValue9(v);
                      }}
                    />
                  </div>
                </div>
              </div>
            ))}
            <div style={{ width: 100, height: 50 }}></div>
          </div>
        ) : (
          <div className="cartbox">
            <img src="../src/assets/36.jpg" alt="" className="cartimg" />

            <p className="cartp">
              购物车中暂无有效商品 <br />
              <span className="span">请加购后再来哦！</span>
            </p>
          </div>
        )}
      </div>

      <div className="demo-submit-bar">
        <SubmitBar
          price={sum * 100}
          buttonText="提交订单"
          onSubmit={() => zf()}
        >
          <Checkbox checked={flag} onClick={() => checkAll()}>
            全选
          </Checkbox>
        </SubmitBar>
      </div>
    </div>
  );
}

export default Index;
